<script setup lang="ts">
import ApprovePersonList from '../approve-person-list/approve-person-list.vue';
import { watch } from 'vue';
import {
  state,
  traverseFlowGraph,
  traverseFlowGraphAddPersons,
} from '../../utils/approve-person-list';
const props = defineProps<{
  flowGraphAddFlow: FlowPathTemplateApi.FlowGraph;
}>();

init();
function init() {
  //清除state缓存数据
  state.list.splice(0, state.list.length);
  //初始化数据
  const currentList = props.flowGraphAddFlow;
  traverseFlowGraph(currentList);
}

watch(
  () => props.flowGraphAddFlow,
  () => {
    init();
  },
);
/**
 * 选择人员
 * @param persons
 * @param index
 */
function personsChange() {
  const currentList = props.flowGraphAddFlow;
  traverseFlowGraphAddPersons(currentList, 0);
}
</script>

<template>
  <nut-cell-group>
    <nut-cell>
      <template #title>
        <text class="approve-process-list__title">流程</text>
      </template>
    </nut-cell>
    <nut-cell>
      <view class="approve-process-list">
        <view class="approve-process-item" v-for="(item, index) in state.list" :key="item.id">
          <view class="approve-process-item--left">
            <view class="approve-process-item__dot"></view>
            <view class="approve-process-item__line" v-if="index !== state.list.length - 1"></view>
          </view>
          <view class="approve-process-item--center">
            <view>
              <text>{{ item.title }}</text>
            </view>
            <view class="approve-process-item__content" v-if="item.flowType === 1">
              <text>{{ item.persons ? item.persons.length : 0 }}</text
              ><text v-if="item.type === 1">人依次审批</text>
              <text v-else-if="item.type === 2">人会签</text>
              <text v-else-if="item.type === 3">人或签</text>
            </view>
            <view class="approve-process-item__content" v-else>
              <text>抄送{{ item.persons ? item.persons.length : 0 }}人</text>
            </view>
          </view>
          <view class="approve-process-item--right">
            <approve-person-list
              :flow-type="item.flowType"
              :type="item.type"
              :persons="item.persons"
              :id="index"
              :is-modify="item.isModify"
              @on-change="personsChange"
            />
          </view>
        </view>
      </view>
    </nut-cell>
  </nut-cell-group>
</template>

<style lang="scss">
@import './index.scss';
</style>
